<template>
  <view class="container">
    <view class="top flex">
      <text>
        共
        <text>{{ totalCount }}</text>
        件商品
      </text>
      <view @click="editBtnClick" class="btn">{{ edit ? '取消' : '编辑' }}</view>
    </view>
    <view class="list" :style="{ height: listHeight }">
      <z-paging ref="paging" :fixed="false" v-model="list" @query="queryList">
        <template #empty>
          <view class="empty-box">
            <image src="/static/common/empty-collect.png" mode=""></image>
            <view class="empty">暂无收藏</view>
            <view class="empty-btn">返回上级</view>
          </view>
        </template>
        <view @click="productClick(item)" v-for="(item, index) in list" :key="index" class="product-box flex">
          <view v-if="edit" class="radio-box">
            <image v-if="selectArr.includes(item.id)" src="/static/my/radio-icon.png" mode=""></image>
            <view v-else class="icon"></view>
          </view>
          <view class="product flex">
            <view class="product-img">
              <image :src="item.coverUrl" mode=""></image>
            </view>
            <view class="product-info">
              <view class="name">
                <text class="tag">{{ item.platformName }}</text>
                {{ item.goodsName }}
              </view>
              <view class="discount flex">
                <view v-if="item.discountTag" class="flex tag">
                  {{ item.discountTag }}
                </view>
                <view v-if="item.rebatesAmount" class="flex">
                  <view class="return">返现</view>
                  <text>¥{{ item.rebatesAmount }}</text>
                </view>
              </view>
              <view class="price">
                <text>¥</text>
                <text>{{ item.offerPrice }}</text>
              </view>
            </view>
          </view>
        </view>
      </z-paging>
    </view>
  </view>
  <view v-if="edit" class="bottom-box flex" :style="{ paddingBottom: bottomArea ? bottomArea : '8px' }">
    <view @click="selectAll" class="l flex">
      <image
        v-if="selectArr.length && selectArr.length === list.length"
        src="/static/my/radio-icon.png"
        mode=""></image>
      <view v-else class="icon"></view>
      <text>全选</text>
    </view>
    <view class="r flex">
      <text>
        已选
        <text>{{ selectArr.length }}</text>
        个内容
      </text>
      <view @click="deleteProduct" class="btn">删除</view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { getCollectList, delCollect } from '@/api/collect.js';

const listHeight = ref('calc(100vh - 50px)');
const bottomArea = ref('0px');
onLoad((options) => {
  const { safeAreaInsets } = uni.getWindowInfo();
  bottomArea.value = safeAreaInsets.bottom + 'px';
});

const paging = ref(null);
const list = ref([]);
const totalCount = ref(0);
const queryList = async (pageNo, pageSize) => {
  console.log(pageNo, pageSize);
  const res = await getCollectList({ pageNum: pageNo, pageSize: pageSize });
  const { rows, total } = res.data;
  totalCount.value = total;
  paging.value.completeByTotal(rows, total);
};

const edit = ref(false);
const selectArr = ref([]);

const editBtnClick = () => {
  edit.value = !edit.value;
  if (edit.value) {
    listHeight.value = `calc(100vh - ${bottomArea.value} - 100px)`;
  } else {
    listHeight.value = `calc(100vh - 50px)`;
    selectArr.value = [];
  }
};
const productClick = (item) => {
  if (edit.value) {
    if (selectArr.value.includes(item.id)) {
      selectArr.value = selectArr.value.filter((i) => i !== item.id);
    } else {
      selectArr.value.push(item.id);
    }
  } else {
    uni.navigateTo({
      url: `/subPages/goodsDetail/index?goodsId=${item.goodsId}&platform=${item.platform}`,
    });
  }
};
const selectAll = () => {
  console.log('selectAll');
  if (selectArr.value.length && selectArr.value.length === list.value.length) {
    selectArr.value = [];
  } else {
    selectArr.value = list.value.map((item) => item.id);
  }
};
const deleteProduct = () => {
  console.log('delete', selectArr.value);
  if (selectArr.value.length === 0) return;
  uni.showModal({
    title: '提示',
    content: '确定删除吗？',
    success: async (res) => {
      if (res.confirm) {
        await delCollect({ ids: selectArr.value });
        selectArr.value = [];
        paging.value.reload();
      }
    },
  });
};
</script>

<style lang="scss" scoped>
.bottom-box {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #fff;
  justify-content: space-between;
  padding: 8px 12px 8px 16px;
  .l {
    image {
      width: 14px;
      height: 14px;
    }
    .icon {
      width: 14px;
      height: 14px;
      border: 1px solid #cccccc;
      border-radius: 50%;
    }
    text {
      font-weight: 400;
      font-size: 12px;
      color: #333;
      margin-left: 8px;
    }
  }
  .r {
    text {
      font-weight: 400;
      font-size: 12px;
      color: #333;
      text {
        color: #ff0309;
      }
    }
    .btn {
      width: 121px;
      height: 44px;
      border-radius: 8px;
      text-align: center;
      line-height: 44px;
      color: #fff;
      background-color: #ff0309;
      font-weight: 500;
      font-size: 14px;
      margin-left: 12px;
    }
  }
}
.container {
  min-height: 100vh;
  background-color: #f8f8f8;
  .top {
    height: 50px;
    background: #f8f8f8;
    justify-content: space-between;
    padding: 0 12px;
    text {
      font-weight: 400;
      font-size: 14px;
      color: #999;
      text {
        color: #ff0309;
      }
    }
    .btn {
      width: 60px;
      height: 26px;
      border-radius: 15px;
      border: 1px solid #ff0309;
      text-align: center;
      line-height: 22px;
      font-weight: 400;
      font-size: 14px;
      color: #ff0309;
    }
  }
  .list {
    .empty-box {
      text-align: center;
      margin-top: -150px;
      image {
        width: 120px;
        height: 120px;
        margin-bottom: 20px;
      }
      .empty {
        color: #333;
        font-weight: 500;
        font-size: 14px;
      }
      .empty-btn {
        width: 150px;
        height: 50px;
        border-radius: 34px;
        text-align: center;
        line-height: 50px;
        border: 1px solid #ff0309;
        font-weight: 500;
        font-size: 16px;
        color: #ff0309;
        margin-top: 32px;
      }
    }
    .product-box {
      .radio-box {
        margin: 0 4px 0 16px;
        image {
          width: 14px;
          height: 14px;
        }
        .icon {
          width: 14px;
          height: 14px;
          border: 1px solid #cccccc;
          border-radius: 50%;
        }
      }
      .product {
        flex: 1;
        background: #ffffff;
        margin: 0 12px 12px;
        border-radius: 12px;
        padding: 12px;
        .product-img {
          width: 88px;
          height: 88px;
          border-radius: 5px;
          margin-right: 10px;
          overflow: hidden;
          image {
            width: 100%;
            height: 100%;
          }
        }
        .product-info {
          width: calc(100% - 90px);
          flex: 1;
          .name {
            line-clamp: 2;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            text-overflow: ellipsis;
            font-weight: 400;
            color: #333;
            font-size: 14px;
            .tag {
              background: linear-gradient(101.54deg, #ff0309 -3.19%, #ff6a2a 96.1%);
              width: 26px;
              height: 12px;
              display: inline-block;
              font-weight: 400;
              font-size: 8px;
              line-height: 11px;
              text-align: center;
              color: #fff;
              border-radius: 3px;
              position: relative;
              top: -4rpx;
            }
          }
          .discount {
            margin: 6px 0;
            > view {
              height: 16px;
              line-height: 16px;
              color: #ff0309;
              font-weight: 400;
              font-size: 10px;
              overflow: hidden;
              border-radius: 3px;
              border: 0.2px solid #ff0309;
              margin-right: 4px;
              &.tag {
                padding: 0 3px;
              }
              view {
                padding: 0 3px;
                background: #ff03091f;
                line-height: 16px;
                &.return {
                  background: #ff0309;
                  color: #fff;
                }
              }
              text {
                padding: 0 2px;
              }
            }
          }
          .price {
            text {
              color: #ff0309;
              font-weight: 400;
              font-size: 12px;
              &:last-child {
                font-size: 14px;
                font-weight: 600;
              }
            }
          }
        }
      }
    }
  }
}
</style>
